import React, { Component } from 'react';
import { View,Platform,SafeAreaView} from 'react-native';
import constants from '../../../utils/constants';
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';
import { MaterialTopTabBar } from 'react-navigation-tabs';
import Study from './study';
import Report from './report';


const TabNavigator = createMaterialTopTabNavigator(
    {
        Study: Study,
        Report: Report,
    },
    {
      
        lazy: false,
        tabBarComponent: (props) => {
            return (
                <View
                    style={{
                      
                        backgroundColor: '#fff',
                        alignItems:"center",
                        paddingTop:Platform.OS === 'android'?0:0
                
                      
                    }}
                >
                    <MaterialTopTabBar {...props}jumpToIndex={() => { }} />
                </View>
            )
        },
        tabBarOptions: {
            activeTintColor: constants.themeColor,
            inactiveTintColor: constants.themeColor,
            labelStyle: {
                fontSize: 18,


            },
            tabStyle:{
                width:120
            },
            style: {
                backgroundColor: "#fff",
                borderBottomWidth: 0,
                shadowOpacity: 0,
                elevation: 0,
                width: 250,
                alignContent: "center"
            },
            indicatorStyle: {
                backgroundColor: constants.themeColor,
                width: 45,
                marginLeft:38,
                marginBottom: 5,
               
            }
        },
        swipeEnabled: false
    }
);

const App = createAppContainer(TabNavigator);


export default class MainHome extends Component {

    static navigationOptions = (e) => {
        return {
            title: "学习"
        }
    }

    constructor(props) {
        super(props);
        this.navigation = this.props.navigation;
  
    }

    render() {

     
        return (
            <SafeAreaView style={{flex:1}}>
                 <App screenProps ={this.props.screenProps}  />
            </SafeAreaView>
           
        )
    }
}